<template>
  <div class="pagePropertiesManager">
    <editor-panel title="页面设置">
      <div class="c-manager">
        <el-form label-position="right" label-width="70px" :model="pageAttr">
          <div class="block-title">
            背景颜色
          </div>
          <el-form-item label="颜色单位">
            <el-radio-group v-model="pageAttr.bgType">
              <el-radio :label="1">
                百分比
              </el-radio>
              <el-radio :label="2">
                像素
              </el-radio>
            </el-radio-group>
          </el-form-item>

          <div class="bgcolor-block">
            <el-form-item label="起始颜色">
              <div style="display: flex">
                <el-color-picker
                  v-model="pageAttr.bgStartColor"
                  show-alpha
                />
                <div>位置</div>
                <el-input
                  v-model="pageAttr.bgStartPosition"
                  type="number"
                  style="width: 70px; margin-left: 6px"
                  placeholder
                  @change="bgStartPositionChange"
                />
              </div>
            </el-form-item>
            <el-form-item label="中间颜色">
              <div style="display: flex">
                <el-color-picker
                  v-model="pageAttr.bgMidColor"
                  show-alpha
                />
                <div>位置</div>
                <el-input
                  v-model="pageAttr.bgMidPosition"
                  type="number"
                  style="width: 70px; margin-left: 6px"
                  placeholder
                  @change="bgMidPositionChange"
                />
              </div>
            </el-form-item>
            <el-form-item label="终点颜色">
              <!-- <el-color-picker style="width:100px" v-model="pageAttr.bgEndColor" show-alpha/> -->
              <div style="display: flex">
                <el-color-picker
                  v-model="pageAttr.bgEndColor"
                  show-alpha
                />
                <div>位置</div>
                <el-input
                  v-model="pageAttr.bgEndPosition"
                  type="number"
                  style="width: 70px; margin-left: 6px"
                  placeholder
                  @change="bgEndPositionChange"
                />
              </div>
            </el-form-item>
          </div>
          <div class="block-title">
            未登录显示图片
          </div>
          <div style="padding-bottom: 10px">
            <el-upload
              :action="uploadImagePath"
              :before-upload="beforeUploadAuthImage"
              :on-success="uploadAuthSuccess"
              :show-file-list="false"
            >
              <el-button
                size="mini"
                type="primary"
                style="margin-top: 10px"
              >
                上传图片
              </el-button>
            </el-upload>
            <img
              :src="pageAttr.unauthImage"
              style="max-width: 80%; max-height: 100px; margin-top: 10px"
            />
            <a
              v-if="pageAttr.unauthImage"
              href="#"
              style="margin-left: 5px"
              @click="deleteAuthImg"
            >删除</a>
          </div>
          <div class="block-title">
            其他设置
          </div>
          <el-form-item label="显示置顶">
            <el-checkbox
              v-model="pageAttr.isStick"
            >
              （当手机超过一屏时才显示）
            </el-checkbox>
          </el-form-item>
          <el-form-item label="显示氛围">
            <el-checkbox v-model="pageAttr.atmosphere" />
            <div v-show="pageAttr.atmosphere" class="showAtmosphere">
              <div class="atOne1">
                <div class="atOneSpan">
                  应用场景
                </div>
                <el-radio
                  v-model="pageAttr.atmosRadio"
                  class="radioClass"
                  label="BigPromotion"
                >
                  借条大促
                </el-radio>
              </div>
              <div class="atOne">
                <div class="atOneSpan">
                  上边距单位（rem）
                </div>
                <el-slider
                  v-model="pageAttr.valueAtmos"
                  :min="pageAttr.minARO"
                  :step="0.01"
                  :max="pageAttr.maxARO"
                  show-input
                />
              </div>
            </div>
          </el-form-item>
        </el-form>
      </div>
    </editor-panel>
  </div>
</template>

<script>
import { mapGetters, mapMutations } from 'vuex'
import $ from 'jquery'
import tool from '@/util/tool'
import { MOS_API_HOST } from '@/config/default'
import EditorPanel from '@/components/properties/common/EditorPanel'

export default {
  components: {
    EditorPanel
  },
  props: {
    activityCode: {
      type: String,
      default:''
    },
  },
  data () {
    return {
      uploadImagePath:'',
      rules: {},
      pageAttr: {
        bgType: 1,
        bgStartColor: null,
        bgEndColor: null,
        bgMidColor: null,

        bgStartPosition: 0, 
        bgMidPosition: 50,
        bgEndPosition: 100,

        isShare: false,
        shareIcon: '',
        shareTitle: '',
        shareDesc: '',

        isStick: false,
        atmosphere: false,
        atmosRadio: '',
        valueAtmos: 1,
        showRule: false,
        whiteNav: true,
        // noNav:false,
        clientAlwaysRender:false,
        minARO: 0,
        maxARO: 20,
        ruleText: '',

        childActivity: false,
        childActivityTitle: null,
        childActivityUrl: null,

        unauthImage: null
      },
    }
  },
  computed: {
    ...mapGetters('step', ['steps', 'stepsl']),
    ...mapGetters('main', ['selectedComponent', 'pageContent']),
    ruleButtonRuleTag () {
      return this.pageContent?.ruleButton?.rule?.tag
    }
  },
  watch: {
    'pageAttr.valueAtmos' (value) {
      this.editPage({
        field: 'valueAtmos',
        value: value,
      })

      this.stepsAdd1(this.pageContent)
    },
    'pageAttr.bgType' (value) {
      this.editPage({
        field: 'background.bgType',
        value: value,
      })
      this.stepsAdd1(this.pageContent)
    },
    'pageAttr.bgStartColor' (value) {
      this.editPage({
        field: 'background.bgStartColor',
        value: value,
      })
      console.log(this.pageContent)
      this.stepsAdd1(this.pageContent)
    },
    'pageAttr.bgMidColor' (value) {
      this.editPage({
        field: 'background.bgMidColor',
        value: value,
      })

      this.stepsAdd1(this.pageContent)
    },
    'pageAttr.bgEndColor' (value) {
      this.editPage({
        field: 'background.bgEndColor',
        value: value,
      })

      this.stepsAdd1(this.pageContent)
    },

    'pageAttr.isShare' (value) {
      this.editPage({
        field: 'isShare',
        value: value,
      })
      this.stepsAdd1(this.pageContent)
    },
    'pageAttr.childActivity' (value) {
      this.editPage({
        field: 'childActivity',
        value: value,
      })
      this.stepsAdd1(this.pageContent)
    },
    'pageAttr.isStick' (value) {
      this.editPage({
        field: 'isStick',
        value: value,
      })
      this.stepsAdd1(this.pageContent)
    },

    'pageAttr.atmosphere' (value) {
      this.editPage({
        field: 'atmosphere',
        value: value,
      })
      this.stepsAdd1(this.pageContent)
    },
    'pageAttr.showRule' (value) {
      this.editPage({
        field: 'ruleButton.show',
        value: value,
      })
      this.stepsAdd1(this.pageContent)
    },
    'pageAttr.whiteNav' (value) {
      this.editPage({
        field: 'headerStyle',
        value: value ? 1 : 2,
      })
      this.stepsAdd1(this.pageContent)
    },
    // 'pageAttr.noNav' (value) {
    //   this.editPage({
    //     field: 'noNav',
    //     value: value
    //   })
    //   this.stepsAdd1(this.pageContent)
    // },
    'pageAttr.clientAlwaysRender' (value) {
      this.editPage({
        field: 'clientAlwaysRender',
        value: value 
      })
      this.stepsAdd1(this.pageContent)
    },
    
  },
  mounted () {
    let _this = this
    this.uploadImagePath=`${MOS_API_HOST}/activity/uploadPicture?shiro_sid=${tool.getUrlParam('shiro_sid')}`
    let h = document.body.clientHeight
    $('.el-card__body').css('max-height', h - 120 + 'px')
    this.$nextTick(() => {
      _this.fillDataToForm()
    })
  },
  methods: {
    ...mapMutations('main', ['editPage', 'editComponent', 'selectComponent']),
    ...mapMutations('step', ['stepsAdd1', 'stepLock']),
    openRuleConfig () {
      this.$refs.ruleconfig.openDialog()
    },
    beforeUploadAuthImage (file) {
      let arr = file.name.split('.')
      if (arr.length >= 2) {
        let ext = arr[arr.length - 1].toLowerCase()
        if (ext === 'jpg' || ext === 'png') {
          return true
        } else {
          this.$message.error('上传文件只能是 jpg 或 png 格式!')
          return false
        }
      } else {
        this.$message.error('上传文件只能是 jpg 或 png 格式!')
        return false
      }
    },
    uploadAuthSuccess (res) {
      if (res && res.data && res.flag === 'S') {
        this.$message({
          message: '上传图片成功',
          type: 'success',
        })
        this.pageAttr.unauthImage = res.data
        let data = {
          field: 'unauthImage',
          value: res.data,
        }
        this.editPage(data)
      }
    },
    deleteAuthImg () {
      this.pageAttr.unauthImage = null
      let data = {
        field: 'unauthImage',
        value: '',
      }
      this.editPage(data)
    },
    changeChildActivityTitle (val) {
      let data = {
        field: 'childActivityTitle',
        value: val,
      }
      this.editPage(data)
    },
    changeChildActivityUrl (val) {
      let data = {
        field: 'childActivityUrl',
        value: val,
      }
      this.editPage(data)
    },

    changeShareTitle (val) {
      let data = {
        field: 'shareTitle',
        value: val,
      }
      this.editPage(data)
    },
    changeShareDesc (val) {
      let data = {
        field: 'shareDesc',
        value: val,
      }
      this.editPage(data)
    },
    deleteShareIcon () {
      this.pageAttr.shareIcon = ''
      let data = {
        field: 'shareIcon',
        value: '',
      }
      this.editPage(data)
    },
    beforeUploadImage (file) {
      let arr = file.name.split('.')
      if (arr.length >= 2) {
        let ext = arr[arr.length - 1].toLowerCase()
        if (ext === 'jpg' || ext === 'png') {
          return true
        } else {
          this.$message.error('上传文件只能是 jpg 或 png 格式!')
          return false
        }
      } else {
        this.$message.error('上传文件只能是 jpg 或 png 格式!')
        return false
      }
    },
    uploadBgSuccess (res) {
      if (res && res.data && res.flag === 'S') {
        this.$message({
          message: '上传图片成功',
          type: 'success',
        })
        this.pageAttr.shareIcon = res.data
        let data = {
          field: 'shareIcon',
          value: res.data,
        }
        this.editPage(data)
      } else {
        this.$message({
          message: '上传图片失败',
          type: 'error',
        })
      }
    },
    fillDataToForm () {
      if (this.pageContent.background) {
        this.pageAttr.bgStartColor = this.pageContent.background.bgStartColor
        this.pageAttr.bgEndColor = this.pageContent.background.bgEndColor
        this.pageAttr.bgMidColor = this.pageContent.background.bgMidColor
        this.pageAttr.bgType = this.pageContent.background.bgType === 2 ? 2 : 1

        this.pageAttr.bgMidPosition = this.pageContent.background.bgMidPosition
        this.pageAttr.bgStartPosition = this.pageContent.background.bgStartPosition
        this.pageAttr.bgEndPosition = this.pageContent.background.bgEndPosition

      } else {
        // 待废弃-兼容整改背景颜色之前的情形
        this.pageAttr.bgStartColor = this.pageContent.bgStartColor
        this.pageAttr.bgEndColor = this.pageContent.bgEndColor
        this.pageAttr.bgMidColor = this.pageContent.bgMidColor
        this.pageAttr.bgType = this.pageContent.bgType === 2 ? 2 : 1

        if (
          this.pageContent.bgMidPosition !== null &&
          this.pageContent.bgMidPosition !== ''
        ) {
          this.pageAttr.bgMidPosition = this.pageContent.bgMidPosition
        }

        if (
          this.pageContent.bgStartPosition !== null &&
          this.pageContent.bgStartPosition !== ''
        ) {
          this.pageAttr.bgStartPosition = this.pageContent.bgStartPosition
        }

        if (
          this.pageContent.bgEndPosition !== null &&
          this.pageContent.bgEndPosition !== ''
        ) {
          this.pageAttr.bgEndPosition = this.pageContent.bgEndPosition
        }

      }

      this.pageAttr.isShare = this.pageContent.isShare ? true : false
      this.pageAttr.isStick = this.pageContent.isStick ? true : false


      this.pageAttr.clientAlwaysRender = this.pageContent.clientAlwaysRender ? true : false
      this.pageAttr.whiteNav = this.pageContent.headerStyle === 2 ? false : true
      // this.pageAttr.noNav = this.pageContent.noNav? true : false

      // this.pageAttr.showRule = this.pageContent.ruleButton?.rule?.tag ? true : false;
      this.pageAttr.showRule = this.pageContent.ruleButton?.show ? true : false
      this.pageAttr.ruleText = this.pageContent.ruleButton?.text

      this.pageAttr.atmosphere = this.pageContent.atmosphere
      this.pageAttr.valueAtmos = this.pageContent.valueAtmos
      this.pageAttr.atmosRadio = 'BigPromotion'

      this.pageAttr.shareIcon = this.pageContent.shareIcon
      this.pageAttr.shareTitle = this.pageContent.shareTitle
      this.pageAttr.shareDesc = this.pageContent.shareDesc

      this.pageAttr.childActivity = this.pageContent.childActivity
      this.pageAttr.childActivityTitle = this.pageContent.childActivityTitle
      this.pageAttr.childActivityUrl = this.pageContent.childActivityUrl

      this.pageAttr.unauthImage = this.pageContent.unauthImage
    },
    ruleTextChange (value) {
      this.editPage({
        field: 'ruleButton.text',
        value: value,
      })
      this.stepsAdd1(this.pageContent)
    },
    bgMidPositionChange (value) {
      this.editPage({
        field: 'background.bgMidPosition',
        value: value,
      })
      this.stepsAdd1(this.pageContent)
    },
    bgStartPositionChange (value) {
      this.editPage({
        field: 'background.bgStartPosition',
        value: value,
      })
      this.stepsAdd1(this.pageContent)
    },
    bgEndPositionChange (value) {
      this.editPage({
        field: 'background.bgEndPosition',
        value: value,
      })
      this.stepsAdd1(this.pageContent)
    },
    saveRuleConfig (data) {
      // 保存规则后的回调，修改组件的上下架时间和规则状态
      let tag = false
      if (data.onlineTime || data.ruleList.length > 0) {
        tag = true
      }
      this.editPage({
        field: 'ruleButton.rule',
        value: { tag: tag, onlineTime: data.onlineTime, offlineTime: data.offlineTime },
      })
    },
    navigateToQdas () {
      console.log('123')
    }
  } 
}
</script>

<style lang="less">
@import url('property.less');
</style>